﻿<div style="background-color: white; padding: 15px; min-height: 400px;">
    <div class="alert alert-info alert-dismissable">
        <i class="fa fa-info-circle text-blue"></i> This is a basic UI for command line "harpergen generate" command, primarily developed to try Vue. Prefer command line version for stability and better error reporting.
    </div>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-md-2 control-label">Choose a Connection:</label>
            <div class="col-md-10">
                <select class="form-control" v-model="connection">
                    <option value="">--select--</option>
                    <option v-for="item in connections" :value="item.Key">{{item.Key}}</option>
                </select>
            </div>
        </div>
    </form>

    <div class="alert alert-danger" v-if="connection">
        Warning! You will get no overwrite prompt for existing files, so make sure you backup your code before clicking Generate!
    </div>

    <table class="table table-bordered" v-if="connection">
        <tbody>
            <tr>
                <th>Table Name</th>
                <th>Identifier</th>
                <th>Module</th>
                <th>Permission Key</th>
                <th style="width: 80px;"></th>
            </tr>
            <tr v-for="item in tables">
                <td>{{item.Tablename}}</td>
                <td><input v-model="item.Identifier" /></td>
                <td><input v-model="item.Module" /></td>
                <td><input v-model="item.PermissionKey" /></td>
                <td><button class="btn btn-primary" @click="generateCode(item)"><i class="icon icon-magic-wand"/> Generate Code</button></td>
            </tr>
        </tbody>
    </table>

    <hr/>

    <div style="margin: 10px 0" v-if="connection">
        <h4>What to Generate:</h4>
        <div>
            <label class="btn">
            <input type="checkbox" v-model="generate.Row"> Row (Entity)
            </label>
            <label class="btn">
            <input type="checkbox" v-model="generate.Service"> Services (Repository, Endpoint)
            </label>
            <label class="btn">
            <input type="checkbox" v-model="generate.UI"> UI (Columns, Form, Page, Grid, Dialog, Css)
            </label>
        </div>
    </div>
</div>